<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('表单名称')" prop="name">
            <el-input v-model="form.name" :placeholder="$t('表单名称')" :maxlength="50" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('访问地址')" prop="path">
            <el-input v-model="form.path" :placeholder="$t('访问地址')" :maxlength="100" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('数据库表')" prop="tableName">
            <el-select v-model="form.tableName" :placeholder="$t('请选择')" filterable @change="getTableField(form.tableName)">
              <el-option
                v-for="table in dbTableOptions"
                :key="table.tableName"
                :label="$t(table.tableName)"
                :value="table.tableName"
              >
                <span style="float: left">{{ $t(table.tableName) }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ $t(table.tableComment) }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <div style="margin: 10px auto;display: inline-block;width:100%;">
            <div class=" area-header">
              <span class="area-header-title">{{ $t('表单字段') }}</span>
            </div>
            <el-table :data="form.wfApplyFormFieldList" border class="formTable">
              <el-table-column :label="$t('序号')" align="center" type="index" width="50" />
              <el-table-column :label="$t('字段名称')" align="center" prop="name" />
              <el-table-column :label="$t('字段描述')" align="center" prop="remark">
                <template slot-scope="scope">
                  <el-form-item :prop="'wfApplyFormFieldList.' + scope.$index + '.remark'" :rules="rules.remark">
                    <el-input v-model="scope.row.remark" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column :label="$t('字段类型')" align="center" prop="type">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.type" :placeholder="$t('请选择')" filterable>
                    <el-option
                      v-for="dict in javaTypeOptions"
                      :key="dict.dictValue"
                      :label="$t(dict.dictLabel)"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column :label="$t('字典类型')" align="center" prop="dictType">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.dictType" clearable filterable :placeholder="$t('请选择')">
                    <el-option
                      v-for="dict in dictOptions"
                      :key="dict.dictType"
                      :label="$t(dict.dictName)"
                      :value="dict.dictType"
                    >
                      <span style="float: left">{{ $t(dict.dictName) }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ dict.dictType }}</span>
                    </el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column :label="$t('待办展示')" align="center" prop="todoShow">
                <template slot-scope="scope">
                  <el-form-item :prop="'wfApplyFormFieldList.' + scope.$index + '.todoShow'" :rules="rules.todoShow">
                    <el-switch
                      v-model="scope.row.todoShow"
                      active-value="0"
                      inactive-value="1"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <SaveBtn has-permi="act:config" />
    </div>
  </div>
</template>

<script>
    import { saveWfApplyForm, getWfApplyForm } from '@/api/act/config/wfApplyForm'
    import { findDbTable, findTableColumn } from '@/api/tool/gen'
    import { optionselect as getDictOptionselect } from '@/api/system/dict/type'
    export default {
        props: {
          wfApplyFormData: {
            type: Object,
            default: null
          }
        },
        data() {
            return {
                // 表单参数
                form: {
                  // 表单字段集合
                  wfApplyFormFieldList: []

                },
                // 遮罩层
                loading: false,
                // 表单校验
                rules: {
                  name: [
                     { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  path: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ],
                  tableName: [
                    { required: true, message: this.$t('必填信息'), trigger: 'blur' }
                  ]
                },
                // 数据库表的集合
                dbTableOptions: [],
                //  字段类型
                javaTypeOptions: [],
                // 字典信息
                dictOptions: []
            }
        },
        watch: {
            wfApplyFormData: function() {
                this.form = this.wfApplyFormData
            }
        },
        created() {
            findDbTable().then(response => {
                this.dbTableOptions = response.data
            })
            this.getDicts('java_field_type').then(response => {
              this.javaTypeOptions = response.data
            })
            /** 查询字典下拉列表 */
            getDictOptionselect().then(response => {
              this.dictOptions = response.data
            })
        },
        methods: {
            // 初始化数据
            init(id) {
                this.loading = true
                if (id != null && id !== '') {
                    getWfApplyForm(id).then(response => {
                        this.form = response.data
                        this.loading = false
                    })
                } else {
                    this.reset()
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                  id: undefined,
                  name: undefined,
                  tableName: undefined,
                  path: undefined,
                  createBy: undefined,
                  createTime: undefined,
                  updateBy: undefined,
                  updateTime: undefined,
                  delFlag: undefined,
                  wfApplyFormFieldList: []
                }
                this.resetForm('form')
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                      this.loading = true
                        saveWfApplyForm(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.$parent.$parent.formOpen = false
                                this.$parent.$parent.getList()
                            } else {
                                this.msgError(response.msg)
                            }
                            this.loading = false
                        }).catch(() => {
                          this.loading = false
                        })
                    } else {
                      this.locationError(document)
                    }
                })
           },
           // 数据库表选中事件
           getTableField: function(tableName) {
             findTableColumn(tableName).then(response => {
               if (response.code === 200) {
                 this.form.wfApplyFormFieldList = []
                 for (var i = 0; i < response.data.length; i++) {
                   var wfApplyFormField = {}
                   wfApplyFormField.name = response.data[i].columnName
                   wfApplyFormField.remark = response.data[i].columnComment
                   wfApplyFormField.type = response.data[i].javaType
                   this.form.wfApplyFormFieldList.push(wfApplyFormField)
                 }
               } else {
                 this.msgError(response.msg)
               }
             })
           }

        }

    }
</script>
